<!--
 * @Descripttion: 严肃声明：本系统已申请软件著作权，受国家版权局知识产权以及国家计算机软件著作权保护！ 违者使用者必究！ Copyright © 2017 - 2020 all rights reserved 版权所有，侵权必究！
 * @version: 2.0
 * @Author: 仓颉物联 冯勤毅
 * @Date: 2021-03-11 13:04:04
-->
<template>
  <div class="detail">
    <div>
      <img src="../../static/image1/save-banner.png" style="width: 100%;height: 287px;">
    </div>
      <div class="container">
        <div v-for="(item, index) in data" :key="index" >
          <div :id="item.title" style="height: 40px;"></div>
          <div class="row content"  style="    padding-top: 40px;">
            <div class="col-lg-7 solution-main__left">
              <h2 class="solution-title " style="    text-align: left;" >{{item.title}}</h2>
              <h5 class="solution-subtitle">{{item.obj1.title}}</h5>
              <p class="solution-content">
                <span class="solution-content__point" v-for="(item1, index1) in item.obj1.desc" :key="index1" >{{item1}}</span>
              </p>
              <h5 class="solution-subtitle">{{item.obj2.title}}</h5>
              <p class="solution-content" v-for="(item2, index1) in item.obj2.desc" :key="'info—_'+index1"  >
                {{item2}}
              </p>
              <div class="solution-content_divider"></div>
              <h5 class="solution-subtitle" style="padding-bottom: 20px;">{{item.obj3.title}}</h5>
              <div class="solution-content__point" style="margin-left:0px;text-align: left;" v-for="(item3, index2) in item.obj3.desc" :key="'info1—_'+index2">{{item3}}</div>

            </div>
            <div class="col-lg-5 solution-main__right" style="    padding-left: 20%;padding-top: 10%;">
              <img :src="item.devInfo.arr[0].img" style="width: 200px;height: 200px;"  alt="安防监控">
            </div>
          </div>
          <div class="section-title sol-mt" style="text-align: center;margin-top: 40px;">
            <h2>{{item.devInfo.name}}</h2>
          </div>
          <div class="row" >
            <div class="col-lg-3 col-md-3 col-sm-3" v-for="(devItem, index4) in item.devInfo.arr" :key="'info4—_'+index4">
              <div class="card solution-card">
                <img :src="devItem.img" class="card-img-top" alt="智能穿戴" style="width: 200px;height: 200px;">
                <div class="card-body">
                  <h4 class="solution-device__desc">{{devItem.desc}}</h4>
                </div>
              </div>
            </div>

          </div>
        </div>
      </div>
  </div>

</template>
<script>
import api from "~/assets/js/api";
import  img1 from "../../static/image1/tabs-5-1-997f49388a.png"
export default {
  data() {
    return {
      tabIndex: 0,
      top: 60,
      offsetTop: 50,
      fixtop: false,
      cycle: [
        {
          icon: 'clock-circle',
          title: '办理周期'
        },
        {
          icon: 'idcard',
          title: '身份类型'
        },
        {
          icon: 'dollar',
          title: '投资金额'
        },
        {
          icon: 'home',
          title: '居住要求'
        },
      ],
      tags: ['智能展示柜', '智能零售柜', '智能充电桩', '智慧⼯地监控/头盔'],
      id: 0,
      data:[{
        title:"智慧零售",
        obj1:{
          title:"针对痛点",
          desc:["补货反馈不及时","陈列摆放无数字化监控","销售数据统计不规范","人工成本高"],
        },
        obj2:{
          title:"解决方案",
          desc:["基于高速4G通讯，对现场货品的摆放和陈列进行拍照和录像，通过AI视觉分析货品库存、成列情况，对业务人员做出及时有效的调配，极大程度上提高了业务人员的工作效率和准确性。"],
        },
        obj3:{
          title:"提供价值",
          desc:["通过AI视觉分析货品库存、成列情况，对业务人员做出及时有效的调配，极大程度上提高了业务人员的工作效率，也大大增强了企业对销售货品的数据统计能力。"],
        },
        devInfo:{
          name:"智慧零售设备",
          arr:[{
            img:"https://tongxinyu.oss-cn-shenzhen.aliyuncs.com/cangJieWeb/solution/ls-1.png",
            desc:'智能陈列柜',
          },{
            img:"https://tongxinyu.oss-cn-shenzhen.aliyuncs.com/cangJieWeb/solution/ls-2.png",
            desc:' 自动售卖机',
          },]}
      },{
        title:"安防监控",
        obj1:{
          title:"针对痛点",
          desc:["户外布线","布网难","无线通讯距离限制","无线通讯质量差"],
        },
        obj2:{
          title:"解决方案",
          desc:["采用4G高速无线通信解决方案","户外、室内通信设备无需布线、布网","依托三大运营商稳定、安全的蜂窝网络","减少设备施工成本以及维护成本"],
        },
        obj3:{
          title:"提供价值",
          desc:["与国内知名厂商合作，为客户提供无线通讯模组，升级监控产品，免去施工现场布线费用，节省设备维护成本；","提供“硬件产品+物联网卡+物联网卡管理平台”，设备使用情况一览无余，可续费平台为客户带来二次收入；"],
        },
        devInfo:{
          name:"安防监控设备",
          arr:[{
            img:"https://tongxinyu.oss-cn-shenzhen.aliyuncs.com/cangJieWeb/solution/jk-1.png",
            desc:'光伏监控',
          },{
            img:"https://tongxinyu.oss-cn-shenzhen.aliyuncs.com/cangJieWeb/solution/jk-2.png",
            desc:'智能门锁',
          },{
            img:"https://tongxinyu.oss-cn-shenzhen.aliyuncs.com/cangJieWeb/solution/jk-3.png",
            desc:'防盗报警器',
          },{
            img:"https://tongxinyu.oss-cn-shenzhen.aliyuncs.com/cangJieWeb/solution/jk-4.png",
            desc:'电子封条',
          },]}
      },{
        title:"智慧教育",
        obj1:{
          title:"针对痛点",
          desc:["手机等电子设备在校园被禁止","学生在校情况老师无法及时快速掌握","家长担心学生在上下学的"],
        },
        obj2:{
          title:"解决方案",
          desc:["基于智能硬件产品","结合连接能力、软件服务、AI人工智能服务","为教育行业提供智能化教学管理、学生健康监测、电子围栏、移动支付、家校互动、通话白名单、一键呼救等运营能力"],
        },
        obj3:{
          title:"提供价值",
          desc:["为学校提供具有多重智能定位技术、一键SOS求救、双向通话、电子围栏、课堂模式等功能","智慧学习模式，家长可以在平台查看孩子作业通知、作业点评、课程表、信息通告等","教师端，学生档案管理、学习考勤管理、学生成绩点评、学生运动时间等信息一目了然","家长可以在小程序设置学生上网时间、上网平台、通话白名单，随时掌握孩子健康监测数据，有发烧等突发症状会通过AI呼叫第一时间通知老师和家长"],
        },
        devInfo:{
          name:"智慧教育设备",
          arr:[{
            img:"https://tongxinyu.oss-cn-shenzhen.aliyuncs.com/cangJieWeb/solution/jy-1.png",
            desc:'智能手表',
          },{
            img:"https://tongxinyu.oss-cn-shenzhen.aliyuncs.com/cangJieWeb/solution/jy-2.png",
            desc:'电子学生证',
          },{
            img:"https://tongxinyu.oss-cn-shenzhen.aliyuncs.com/cangJieWeb/solution/jy-3.png",
            desc:'点读笔',
          }]}
      },{
        title:"金融支付",
        obj1:{
          title:"针对痛点",
          desc:["多方结算效率低","到账慢资金压力大","安全难保障","分润扣点实时变"],
        },
        obj2:{
          title:"解决方案",
          desc:["通过AI智能云呼叫平台，以智能语音机器人代替人工客服，完成贷后催收、逾期提醒等业务实现业务流程自动化运转。"],
        },
        obj3:{
          title:"提供价值",
          desc:["为客户提供流量运营服务和分润管理，助力企业实现可持续盈利增长","AI智能呼叫代替人工服务，支持贷后催收、逾期提醒等业务能力，提高企业工作效率","提供实时数据和状态监控，同时支持业务能力动态扩展和业务规模扩展。"],
        },
        devInfo:{
          name:"金融支付设备",
          arr:[{
            img:"https://tongxinyu.oss-cn-shenzhen.aliyuncs.com/cangJieWeb/solution/jr-1.png",
            desc:'扫码枪 ',
          },{
            img:"https://tongxinyu.oss-cn-shenzhen.aliyuncs.com/cangJieWeb/solution/jr-2.png",
            desc:'  PDA   ',
          },{
            img:"https://tongxinyu.oss-cn-shenzhen.aliyuncs.com/cangJieWeb/solution/jr3.png",
            desc:'智能穿戴',
          }]}
      },{
        title:"智慧养老",
        obj1:{
          title:"针对痛点",
          desc:["养老服务人员少 ","养老服务管理乱","老人健康情况不明朗监护人不了解"],
        },
        obj2:{
          title:"解决方案",
          desc:["搭建“医疗+健康+养老”平台，基于智能健康设备和AI智能云呼叫，为机构、居家、社区养老提供医养服务能力，包括远程监护、健康监测、云呼叫中心、订单管理、用户管理等运营能力。"],
        },
        obj3:{
          title:"提供价值",
          desc:["在线医生对老人的健康需求提供相应的健康管理、诊疗等服务","对患有高血压、糖尿病等老人，会提供相应的健康管理和上门巡诊服务；","远程守护老人的健康，老人的健康监测、血压血氧监测、跌倒意外告警等数据同步智慧养老平台，相关人员第一时间知悉。"],
        },
        devInfo:{
          name:"智慧养老设备",
          arr:[{
            img:"https://tongxinyu.oss-cn-shenzhen.aliyuncs.com/cangJieWeb/solution/yl-1.png",
            desc:'智能手表',
          },{
            img:"https://tongxinyu.oss-cn-shenzhen.aliyuncs.com/cangJieWeb/solution/yl-2.png",
            desc:'电子血压计',
          },{
            img:"https://tongxinyu.oss-cn-shenzhen.aliyuncs.com/cangJieWeb/solution/yl-3.png",
            desc:'老人防丢钥匙扣',
          }]}
      },{
        title:"智慧交通",
        obj1:{
          title:"针对痛点",
          desc:["数据单一且杂乱庞大交通信息被动收集车辆动态不清晰驾驶员状态不明"],
        },
        obj2:{
          title:"解决方案",
          desc:["基于智慧轮胎、OBD、车联网等终端，为智慧交通提供车辆定位、信息采集、智能分析与预警、AI呼叫中心等运营能力。"],
        },
        obj3:{
          title:"提供价值",
          desc:["报警联动，交通异常、交通事件检测报警、联动；","实时共享天气信息、违章信息、道路运行状况信息等；","对驾驶员驾驶时间、驾驶速度等做一个预判，并实时同步管理员，为安全交通保驾护航；","管理人员直接掌握车辆位置、车辆状态、故障预警等信息，随时安排调动，提高车队运行效率。"],
        },
        devInfo:{
          name:"智慧交通设备",
          arr:[{
            img:"https://tongxinyu.oss-cn-shenzhen.aliyuncs.com/cangJieWeb/solution/jt-1.png",
            desc:'智慧轮胎',
          },{
            img:"https://tongxinyu.oss-cn-shenzhen.aliyuncs.com/cangJieWeb/solution/jt-2.png",
            desc:' 车联网',
          },{
            img:"https://tongxinyu.oss-cn-shenzhen.aliyuncs.com/cangJieWeb/solution/jt-3.png",
            desc:' 道路监控',
          },{
            img:"https://tongxinyu.oss-cn-shenzhen.aliyuncs.com/cangJieWeb/solution/jt-4.png",
            desc:' 智慧充电桩',
          }]}
      }

      ],
      list: [],
      datas: {
        cycle: []
      },
      imgs: []
    }
  },
  mounted() {

    // 利用scrollIntoView这个api实现自动跳转
    this.scroll();
  },

  watch: {
    //监听路由地址的改变
    '$route.query':{
      deep:true,
      handler(to){
        //this.scroll();
        let idName = to.id;
        debugger

        if (idName) {
          let toElement = document.getElementById(idName)

          //判断有没有瞄点id有就是底部导航栏跳转，会定位到指定位置，没有id就是顶部的导航栏跳转不会到页面指定位置
          if(!!toElement) {
            toElement.scrollIntoView()
            //跳转到对应位置之后释放本次存储中的idName，以免顶部导航栏跳转出现问题
          }
        }

      }
    }
  },

  methods: {

    async fetchList(pid) {
      let res = await api.article.list({pid});
      if (res.length>0) {
        res.forEach(element => {
          element.image = element.image.split(',')
          element.cycle = element.cycle.split(',')
        });
        this.list = res
        this.datas = res[0]
        console.log(res);
      }
    },
    async fetchData() {
      let res = await api.article.info({id: 1});
      if (res) {
        this.datas = res
      }
    },
    select(i) {
      this.datas = this.list[i]
    },
    changeTab(i) {
      this.tabIndex = i
      let el = '#tab'+ i
      console.log(el)
      this.$el.querySelector(el).scrollIntoView({
          behavior: "smooth",  // 平滑过渡
          block:    "start"  // 上边框与视窗顶部平齐。默认值
      })
    },
    scroll(){
      // 获取页面参数
      let id = this.$route.query.id;
      let toElement = document.getElementById(id)

      //判断有没有瞄点id有就是底部导航栏跳转，会定位到指定位置，没有id就是顶部的导航栏跳转不会到页面指定位置
      if(!!toElement) {
        toElement.scrollIntoView()
        //跳转到对应位置之后释放本次存储中的idName，以免顶部导航栏跳转出现问题
      }
    },
    change(e) {
      this.fixtop = e
    }
  }
}
</script>
<style>
  #components-layout-demo-basic {
    text-align: left;
  }
</style>
<style lang="stylus" scoped>
  .container{
    margin: 0 auto;

  }
  .content{
    display: flex;

  }
  .row{
    display: flex;
    justify-content: space-around;
  }
    .col-lg-3{
      padding-right :15px;
    }
  .solution-card {
    background: #f8f8f8;
    border: none
  }

  .solution-tag {
    color: #333;
    font-size: 16px;
    margin-bottom: 20px
  }

  .solution-bg.solution-main__right {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
    -ms-flex-align: end;
    align-items: flex-end;
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end
  }

  .solution-bg.solution-main__left {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center
  }

  .news-tabs,.solution-content {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox
  }

  .solution-title {
    color: #111;
    font-size: 36px;
    margin-bottom: 40px
  }

  .solution-subtitle {
    color: #333;
    font-size: 20px;
    margin-bottom: 10px
    text-align:left;
  }

  .solution-subtitle::before {
    content: '●';
    font-size: 12px;
    position: relative;
    bottom: 2px;
    margin-right: 8px
  }

  .solution-content {
    margin-bottom: 15px;
    color: #495770;
    font-size: 16px;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    -webkit-box-align: center;
    align-items: center;
    padding-left: 15px
  }

  .solution-content.solution-content__sub {
    margin-left: 20px;
    text-indent: -20px
  }

  .solution-content_divider {
    border: 1px solid #EFEFEF;
    margin: 15px 0
  }

  .solution-device__desc {
    color: #000;
    font-size: 26px;
    margin-bottom: 70px;
    text-align: center
  }

  .solution-content__point {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    color: #495770
  }

  .solution-content__point::before {
    content: '';
    display: inline-block;
    margin-right: 6px;
    margin-bottom: 2px;
    vertical-align: middle;
    background-image: url(../../static/image1/check.png);
    background-size: cover;
    background-position: center center;
    width: 15px;
    min-width: 15px;
    height: 16px
  }

  .solution-content__point+.solution-content__point {
    margin-left: 18px
  }

  .col-lg-7{
    flex: 0 0 auto;
    width: 58.3333333333%;
  }
    .col-lg-5{
      flex: 0 0 auto;
      width: 41.6666666667%;
    }
  .container{
    max-width: 1200px;
  }

  .wenzi{
    padding: 20px;
    font-weight: 400;
    text-align: left;
    font-family: Arial;
    font-size: 18px;
    color: #000000;
  }
  .detail
    background: linear-gradient(to bottom,rgba(149,234,241,0.2), rgba(255,255,255,0.2))
    .container
      .breadcrumb
        padding 30px 0
        font-size 17px
        text-align left
        color #001e4f
        a
          color #001e4f
      .right
        .title-box
          height 170px
          background #E7FBFF
        .main
          margin-left 40px
          .title
            padding 45px 40px 20px 0
            font-size 36px
          .deal
            padding 50px
            .deal-item
              width 50%
              float left
              padding 25px 0
        .content
          padding 20px 0
          .com
            padding 30px 50px
            .list-title
              padding-bottom 30px
              text-align left
</style>
